<template>
    <div class="sign-up">
        <div>
            <span class="icon-nickname"><i class="fa fa-user"></i></span>
            <input type="text" class="nickname" placeholder="你的昵称" v-model="nickname.value"
                   @blur="check('nickname','/api/register/checkNickname','昵称已存在!')">
        </div>
        <div>
            <span class="icon-phone"><i class="fa fa-mobile"></i></span>
            <input type="text" placeholder="手机号" v-model="telephone.value"
                   @blur="check('telephone','/api/register/checkTelephone','手机号已注册!')">
        </div>
        <div v-if="flag">
            <span class="icon-validate"><i class="fa fa-shield"></i></span>
            <input type="text" placeholder="手机验证码" v-model="verCode.value" @blur="checkVerCode">
            <button type="button" class="code" @click="send($event)">发送验证码</button>
        </div>
        <div>
            <span class="icon-password"><i class="fa fa-lock"></i></span>
            <span class="icon-eye" @click="peep"><i class="fa fa-eye"></i></span>
            <input type="password" class="password" placeholder="密码" v-model="password.value">
        </div>
        <button type="button" ref="btn" @click="submit">注册</button>
    </div>
</template>

<script>
    import { Toast,Indicator } from 'mint-ui'
    export default {
        data(){
            return {
                nickname : {
                    value: '',
                    pattern : /^[\u4E00-\u9FA5a-zA-Z0-9_]{2,6}$/,
                    message : {
                        blank : '昵称不能为空!',
                        illegal : '昵称格式不正确!'
                    },
                    asyncCheck : false,
                    pass : false,
                    blurVal : ''
                },
                telephone : {
                    value: '',
                    pattern : /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                    message : {
                        blank : '手机号不能为空!',
                        illegal : '手机号格式不正确!'
                    },
                    asyncCheck : false,
                    pass : false,
                    blurVal : ''
                },
                password : {
                    value: '',
                    //必须包含字母和数字
                    pattern : /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{6,12}$/,
                    message : {
                        blank : '密码不能为空!',
                        illegal : '密码格式不正确!'
                    }
                },
                verCode : {
                    value : '',
                    message : {
                        blank : '验证码不能为空!'
                    },
                    asyncCheck : false,
                    pass : false,
                    blurVal : ''
                },
                flag : false
            }
        },
        watch : {
            'telephone.value' : function(newVal,oldVal){
                if(this.telephone.value !== '' && this.telephone.pattern.test(this.telephone.value)){
                    this.flag = true
                }else{
                    this.flag = false
                }
            }
        },
        methods : {
            peep(){
                var i = document.querySelector('.icon-eye i')
                i.classList.toggle('fa-eye-slash')
                i.classList.toggle('fa-eye')
                if(i.classList.contains('fa-eye'))
                    document.querySelector('.password').type = 'password'
                else
                    document.querySelector('.password').type = 'text'
            },
            send(event){
                //重置验证码文本框
                this.verCode.blurVal = this.verCode.value = ''
                //$event指向当前dom对象
                var button = event.target
                button.style.opacity = .7
                button.style.zIndex = -1
                var second = 6
                var timer = setInterval(function(){
                    second--
                    button.innerHTML = `重新发送(${second}s)`
                    if(second === 0){
                        button.innerHTML = '重新发送'
                        button.style.opacity = 1
                        button.style.zIndex = 1
//                        second = 10   为什么可以不需要重置?
                        clearInterval(timer)
                    }
                },1000)
                //调用api,发送短信
                //uri: /api/sendVerificationCode?telephone=xxxxxxx
                this.$http.get('/api/register/sendVerificationCode',{
                    params : {
                        telephone : this.telephone.value
                    }
                }).then(function(res){
                    var result = res.data
                    if(result.status !== 0)
                        return Toast({
                            message: '出错啦!',
                            iconClass: 'fa fa-close'
                        });
                    if(result.code !== 0)
                        return Toast({
                            message: '出错啦!',
                            iconClass: 'fa fa-close'
                        });
                },function(err){

                })
            },
            check(target,uri,message){
                if(this[target].value === '' || this[target].blurVal === this[target].value ||
                    !this[target].pattern.test(this[target].value)) return
                this[target].blurVal = this[target].value
                this[target].asyncCheck = true
                this.$http.get(uri,{
                    params : {
                        value : this[target].value
                    }
                }).then(function(res){
                    this[target].asyncCheck = false
                    var result = res.data
                    if(result.status === 0) return this[target].pass = true
                    this[target].pass = false
                    if(result.status === 1){
                        return Toast({
                            message : message,
                            iconClass: 'fa fa-close',
                            duration : 2000
                        })
                    }
                    Toast({
                        message: '出错啦!',
                        iconClass: 'fa fa-close',
                        duration : 2000
                    });
                },function(err){
                    this[target].pass = this[target].asyncCheck = false
                })
            },
            checkVerCode(){
                if(this.verCode.value === '' ||
                    this.verCode.blurVal === this.verCode.value) return
                this.verCode.blurVal = this.verCode.value
                this.verCode.asyncCheck = true
                //发送ajax请求校验
                this.$http.get('/api/register/checkVerCode',{
                    params : {
                        verCode : this.verCode.value,
                        telephone : this.telephone.value
                    }
                }).then(function(res){
                    this.verCode.asyncCheck = false
                    var result = res.data
                    if(result.status === 0) return this.verCode.pass = true
                    this.verCode.pass = false
                    if(result.status === 1)
                        return Toast({
                            message : '验证码错误!',
                            iconClass: 'fa fa-close',
                            duration : 2000
                        })
                    return Toast({
                        message : '验证码无效或已过期!',
                        iconClass: 'fa fa-close',
                        duration : 2000
                    })
                },function(err){
                    this.verCode.asyncCheck = this.verCode.pass = false
                })
            },
            async submit(){
                this.$refs.btn.disabled = true
                this.$refs.btn.style.opacity = .8
                var itemList = ['nickname','telephone','password','verCode']
                for(var i = 0; i < itemList.length; ++i){
                    if(this[itemList[i]].value === '' ||
                        (this[itemList[i]].pattern && !this[itemList[i]].pattern.test(this[itemList[i]].value))){
                        var timer = setTimeout(() => {
                            this.$refs.btn.disabled = false
                                this.$refs.btn.style.opacity = 1
                                clearTimeout(timer)
                            },2000)
                        if(this[itemList[i]].value === '')
                            return Toast({
                                message : this[itemList[i]].message.blank,
                                iconClass: 'fa fa-close',
                                duration : 2000
                            })
                        return Toast({
                            message : this[itemList[i]].message.illegal,
                            iconClass: 'fa fa-close',
                            duration : 2000
                        })
                    }
                }
                //说明基本校验都通过
                for(i = 0; i < itemList.length; ++i){
                    while(this[itemList[i]].asyncCheck){
                        await new Promise((resolve,reject) => {
                            setTimeout(() => {
                                resolve()
                            },100)
                        })
                        console.log(1)
                    }
                }
                for(i = 0; i < itemList.length; ++i){
                    if(this[itemList[i]].pass !== undefined && this[itemList[i]].pass === false){
                        this.$refs.btn.disabled = false
                        this.$refs.btn.style.opacity = 1
                        return
                    }
                }
                console.log('ok')
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                });
                //发送ajax请求提交表单数据
                this.$http.post('/api/register/add',{
                    params : {
                        nickname : this.nickname.value,
                        telephone : this.telephone.value,
                        password : this.password.value
                    }
                }).then(function(req){
                    Indicator.close();
                    var result = req.data
                    this.$refs.btn.disabled = true
                    this.$refs.btn.style.opacity = .8
                    var timer = setTimeout( () => {
                        clearTimeout(timer)
                        this.$refs.btn.disabled = false
                        this.$refs.btn.style.opacity = 1
                        if(result.status === 0){
                            for(i = 0; i < itemList.length; ++i){
                                this[itemList[i]].value = this[itemList[i]].blurVal = ''
                                if(this[itemList[i]].pass !== undefined)
                                    this[itemList[i]].pass = false
                            }
                        }
                    },2000)
                    if(result.status === 0){
                        return Toast({
                            message: '注册成功!',
                            iconClass: 'fa fa-check',
                            duration : 2000 //3000默认值
                        });
                    }
                    if(result.status === -1)
                        return Toast({
                            message: '出错啦!',
                            iconClass: 'fa fa-close',
                            duration : 2000
                        });
                    if(result.status === 1)
                        return Toast({
                            message: '非法操作!',
                            iconClass: 'fa fa-close',
                            duration : 2000
                        });
                },function(err){
                    Indicator.close();
                    this.$refs.btn.disabled = false
                    this.$refs.btn.style.opacity = 1
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .sign-up{
        width:100%;
        div{
            position: relative;
            span{
                position: absolute;
                line-height:50px;
                font-size:20px;
                color:#969696;
                &.icon-nickname{
                     left:14px;
                 }
                &.icon-phone{
                     left:14px;
                    font-size:28px;
                 }
                &.icon-validate{
                     left:14px;
                 }
                &.icon-password{
                     left:14px;
                 }
                &.icon-eye{
                    right: 10px;
                 }
            }
        }
        input{
            border: 1px solid #c8c8c8;
            border-top: 0;
            width: 100%;
            height: 50px;
            padding: 4px 12px 4px 35px;
            border-radius: 0;
            background-color: hsla(0,0%,71%,.1);
            &.nickname{
                 border-top: 1px solid #c8c8c8;
                 border-top-left-radius: 4px;
                 border-top-right-radius: 4px;
             }
            &.password{
                 border-bottom-left-radius: 4px;
                 border-bottom-right-radius: 4px;
             }
        }
        button{
            margin-top: 20px;
            width: 100%;
            padding: 9px 18px;
            font-size: 18px;
            border-radius: 25px;
            color: #fff;
            display: block;
            background: #3db922;
            &.code{
                 position: absolute;
                 top:7px;
                 right:10px;
                 width: 90px;
                 height: 36px;
                 line-height: 36px;
                 border-radius: 20px;
                 margin-top:0;
                 padding: 0;
                 font-size:14px;
             }
        }
    }
</style>

